<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form :model="searchParams" label-width="80px" style="height: 100px; margin: 10px">
          <el-form-item label="标题">
            <el-input v-model="searchParams.quBankName"> </el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-input v-model="searchParams.quBankName"> </el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="2" :offset="20">
        <el-button type="primary" @click="searchTable(searchParams)">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="emptySearch(searchParams)">重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
        <el-button type="primary" @click="delQuBank()">删除</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">

        <el-table :data="tableData" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="quBankName" label="题库名"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

    </el-row>
    <Page :pageNum="searchParams.current" :total="searchParams.total" :pageSize="searchParams.size"
      @sizeChange="sizeChange" @currentChange="currentChange"></Page>
    <el-dialog title="添加文章" :visible.sync="dialogFormVisible" @close="handleClose" :fullscreen="true" >
      <el-form :model="formBank">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="formBank.quBankName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <quill-editor class="ql-editor" v-model="content" ref="myQuillEditor" :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
          </quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitFrom()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { queryQuBankAll, saveQuBank, delQuBank, queryBankDetail } from '@/api/question/question'
import Page from '@/components/Pagination/pagination.vue'

 

export default {
  components: { Page },
  data() {
    return {
      content: '', //双向数据绑定数据
      // 富文本编辑器配置
      editorOption: {
      placeholder: '请输入正文',
          modules: {
              toolbar: [
                  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                  ['blockquote', 'code-block'], // 引用  代码块
                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
                  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                  [{ indent: '-1' }, { indent: '+1' }], // 缩进
                  [{ direction: 'rtl' }], // 文本方向
                  [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                  [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                  [{ align: [] }], // 对齐方式
                  ['clean'], // 清除文本格式
                  ['link', 'image', 'video'] // 链接、图片、视频
              ],
              imageDrop: true,
              imageResize:{
                  displayStyles:{
                      // backgroundColor: 'black',
                      border: 'none',
                      color: 'white'
                  } ,
                  modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
              }

          },
      },
      rr: 0,
      checkList: 0,
      activeNames: [],
      detailDialogVisible: false,
      dialogFormVisible: false,
      quBank: "",
      formBank: {
        quBankName: "",
      },
      tableData: [],
      formLabelWidth: "120px",
      delBankIds: [],
      searchParams: {
        size: 10,
        current: 1,
        total: 0,
        quBankName: "",
      },
      questionList: []
    };
  },
  created() {
  },
  mounted() {
    this.queryAll(this.form);
  },
  methods: {
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.searchParams.current = val;
      //刷新表格
      this.queryAll();
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.searchParams.size = val;
      //刷新表格
      this.queryAll();
    },
    //获取列表
    queryAll() {
      queryQuBankAll(this.searchParams)
        .then((res) => {
          this.tableData = res.data.records;
          this.searchParams.total = res.data.total;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //新增题库
    submitFrom() {
      saveQuBank(JSON.stringify(this.formBank)).
        then((res) => {
          if (res.code == 200) {
            //关闭弹窗
            this.handleClose();
            //刷新table
            this.queryAll(this.form);
            //清空表单
            this.clearFrom();
          }
        });
    },
    //删除题库
    delQuBank() {
      delQuBank({ delBankIds: this.delBankIds })
        .then((res) => {
          if (res.code == 200) {
            //关闭弹窗
            this.handleClose();
            //刷新table
            this.queryAll(this.form);
            //清空表单
            this.clearFrom();
          }
        });
    },
    //搜索
    searchTable(searchParams) {
      this.queryAll(searchParams);
    },
    //重置搜索框
    emptySearch(searchParams) {
      searchParams.quBankName = "";
      this.queryAll();
    },
    //关闭弹窗
    handleClose() {
      this.dialogFormVisible = false;
      //清空表单
      this.clearFrom();
    },
    //清空表单
    clearFrom() {
      this.searchParams.quBankName = "";
      this.formBank.quBankName = "";
    },
    handleSelectionChange(val) {
      this.delBankIds = [];
      for (let i in val) {
        this.delBankIds.push(val[i].quBankId);
      }
    },
    //详情
    handleClick(row) {
      this.detailDialogVisible = true;
      queryBankDetail({
        quBankId: row.quBankId
      }).then(res => {
        if (res.code === 200) {
          this.questionList = res.data;
        }

      })
    },

    //全部展开
    expansion() {
      let arr = this.questionList;
      let len = arr.length
      for (let i = 0; i < len; i++) {
        this.activeNames.push(i)
      }
    },
    //全部关闭
    closeCollapse() {
      this.activeNames = [];
    },
    //展开折叠面板
    handleChange(val) {

    },
  },
};
</script>
  
<style lang="scss" scoped >
.quill-editor ::v-deep .ql-container {
  min-height: 600px;
}

.ql-container {
  min-height: 230px;
}

::v-deep {
  .ql-snow .ql-tooltip [data-mode="link"]::before {
    content: "请输入链接地址:";
    left: 0;
  }

  .ql-snow .ql-tooltip.ql-editing {
    left: 0 !important;
  }

  .ql-snow .ql-tooltip {
    left: 0 !important;
  }

  .ql-snow .ql-editor {
    max-height: 100%;
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px" !important;
    font-size: 14px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: "10px" !important;
    font-size: 10px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: "12px" !important;
    font-size: 12px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px" !important;
    font-size: 16px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18px" !important;
    font-size: 18px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px" !important;
    font-size: 20px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
    content: "30px" !important;
    font-size: 30px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    content: "32px" !important;
    font-size: 32px;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    content: "宋体" !important;
    font-family: "SimSun";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "黑体" !important;
    font-family: "SimHei";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑" !important;
    font-family: "Microsoft YaHei";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体" !important;
    font-family: "KaiTi";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋" !important;
    font-family: "FangSong";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial" !important;
    font-family: "Arial";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
    content: "Times New Roman" !important;
    font-family: "Times New Roman";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
    content: "sans-serif" !important;
    font-family: "sans-serif";
  }

  .ql-font-SimSun {
    font-family: "SimSun";
  }

  .ql-font-SimHei {
    font-family: "SimHei";
  }

  .ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
  }

  .ql-font-KaiTi {
    font-family: "KaiTi";
  }

  .ql-font-FangSong {
    font-family: "FangSong";
  }

  .ql-font-Arial {
    font-family: "Arial";
  }

  .ql-font-Times-New-Roman {
    font-family: "Times New Roman";
  }

  .ql-font-sans-serif {
    font-family: "sans-serif";
  }

  .ql-snow.ql-toolbar .ql-formats .ql-revoke {
    width: 20px;
    height: 20px;
    filter: grayscale(100%);
    opacity: 1;
  }

  .ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
    width: 20px;
    height: 20px;
    filter: none;
    opacity: 0.9;
  }

  // img {
  //   filter: grayscale(100%);
  //   opacity: 1;
  // }

  img:hover {
    filter: none;
    opacity: 0.9;
  }

  /*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: #ccc;
    height: 125px;
    overflow: auto;
  }
}

/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}</style>